<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./emptyshot.ico" />
    <title>中外电影信息展示平台</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 先引入jquery.js，才能使用点击切换效果和select2 -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- 引入select2 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
</head>
<body>
    <!-- 头部 -->
    <header>
        <h1>中外电影信息展示平台</h1>
        <!-- <div class="showTime"></div> -->
        <!-- 获取当前时间 -->
        <!-- <script>
            var t = null;
            t = setTimeout(time, 1000);//開始运行
            function time() {
                clearTimeout(t);//清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();//获取时
                var m = dt.getMinutes();//获取分
                var s = dt.getSeconds();//获取秒
                document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "日-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行     
            }
        </script> -->
    </header>
    <!-- 页面主题部分 -->
    <section class="mainbox">
        <!-- 上面盒子 -->
        <div class="topbox">
            请选择你要比较的电影
        </div>
        <div class="bottombox">
            <!-- 左边盒子 -->
            <div class="bot bot_leftbox">
                <div class="select_box">
                    <select class="singleSelect select1" style="width: 2.5rem;">
                        <option value="">---请选择电影---</option>
                    </select>
                </div>
                <div class="chart_box">
                    <div class="word">
                        <p></p>
                        <p></p>
                    </div>
                    <div class="chart">
                        <img src="" alt="" />
                    </div>
                    <!-- <div class="map">
                        <div class="map1"></div>
                        <div class="map2"></div>
                    </div> -->
                </div>
            </div>
            <!-- 右边盒子 -->
            <div class="bot bot_rightbox">
                <div class="select_box">
                    <select class="singleSelect select3" style="width: 2.5rem;">
                        <option value="">---请选择电影---</option>
                    </select>
                </div>
                <div class="chart_box">
                    <div class="word">
                        <p></p>
                        <p></p>
                    </div>
                    <div class="chart">
                        <img src="" alt="" />
                    </div>
                    <!-- <div class="map">
                        <div class="map1"></div>
                        <div class="map2"></div>
                    </div> -->
                </div>
            </div>
        </div>
    </section>
    <!-- 引入module.js -->
    <script src="js/index.js" type="module"></script>
    <!-- 屏幕适配 -->
    <script type="text/javascript"> 
        let docEl = document.documentElement, 
        //当设备的⽅向变化（设备横向持或纵向持）此事件被触发。绑定此事件时， 
        //注意现在当浏览器不⽀持orientationChange事件的时候我们绑定了resize 事件。
        //总来的来就是监听当然窗⼝的变化，⼀旦有变化就需要重新设置根字体的值
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            //设置根字体⼤⼩ 
            docEl.style.fontSize = 25 * (docEl.clientWidth / 640) + 'px';
        }; 
        //绑定浏览器缩放与加载时间 
        window.addEventListener(resizeEvt, recalc, false); 
        document.addEventListener('DOMContentLoaded', recalc, false);
    </script>
</body>
</html>